<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
	#wrap{ width:950px; height:370px; overflow:hidden; position:relative; font-size:12px;}
	#wrap p{ position:absolute; right:10px; bottom:10px;}
	span{ padding:3px 6px; background-color:#fff; border:1px solid #1E71D7; margin-right:3px; cursor:pointer}
	.current{ background-color:red; color:#fff;}
	#banner{ height:370px; position:absolute;}
	img{ float:left;}
    </style>
<script src="jq/jquery-1.12.3.min.js"></script>
  <script>
	$(function(){
	var imglength=$('#banner img').length;
	var imgwidth=$('#banner img').width();
	$('#banner').width(imglength*imgwidth);
	for(i=1;i<=imglength;i++){
	$('.page').append('<span>'+i+'</span>')}
	$('span:first').addClass('current');
	$('span').mouseover(function(){
	$(this).addClass('current').siblings('span').removeClass('current');
	indexx=$(this).index();
	$('#banner').animate({left:"-"+(imgwidth*indexx)},1000);
	})
	function scroll(){
	var cur_index=$('.page .current').index('span');
	var next_index
	if($('.page span:last').hasClass('current')){
	next_index=0;
	}
	else{
	next_index=cur_index+1;
	}
	$('span').eq(next_index).triggerHandler('mouseover');
	}
	int=setInterval(scroll,1000);
	$('#wrap').mouseover(function(){
	clearInterval(int);
	}).mouseout(function(){
	int=setInterval(scroll,1000);
	})
	})
  </script>
  </head>
  <body>
<div id="wrap">
	<div id="banner">
    	<img src="images/7ae45b82251f63e5331eae3dd2dabf6a.jpg"/>
        <img src="images/38f64a79350dee184c425e36e418e796.jpg" />
        <img src="images/b594f84a0122182f6f5165b93d4eb337.jpg" />
        <img src="images/c8697cb8dfc2ca1299be8485f39018aa.jpg" />
        <img src="images/cd5fba39ad8b764772be6857317131c8.jpg" />
    </div>
    <p class="page"></p>
</div>
  </body>
</html>